<template>
	<div class="searchOrder">
		<div class="search">
			<div class="mui-input-row">
				<label>工单编号：</label>
				<div class="search-right">
					<input type="text" placeholder="请输入工单编号" class="search-input" />
					<el-button type="primary">确定</el-button>
				</div>

			</div>
		</div>
		<div class="itemOut">
			<mt-navbar v-model="selected">
				<mt-tab-item id="1">
					<span class="icon el-icon-postcard"></span>
					基本信息
				</mt-tab-item>
				<mt-tab-item id="2">
					<span class="icon iconfont icon-circulation"></span>
					<el-badge :value="0" class="item" type="warning">
						制程信息
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="3">
					<span class="icon iconfont icon-sop_tap_show"></span>
					<el-badge :value="0" class="item" type="warning">
						SOP
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="4">
					<span class="icon iconfont icon-yichangliebiao"></span>
					<el-badge :value="0" class="item" type="warning">
						异常列表
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="5">
					<span class="icon iconfont icon-wenjian"></span>
					<el-badge :value="0" class="item" type="warning">
						缺料列表
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="6">
					<span class="icon iconfont icon-biji"></span>
					<el-badge :value="0" class="item" type="warning">
						检验列表
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="7">
					<span class="icon iconfont icon-weixiuliebiao"></span>
					<el-badge :value="0" class="item" type="warning">
						维修列表
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="8">
					<span class="icon iconfont icon-wenjian"></span>
					<el-badge :value="0" class="item" type="warning">
						托盘列表
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="9">
					<span class="icon iconfont icon-wenjian"></span>
					<el-badge :value="0" class="item" type="warning">
						投料列表
					</el-badge>
				</mt-tab-item>
				<mt-tab-item id="10">
					<span class="icon iconfont icon-wenjian"></span>
					<el-badge :value="0" class="item" type="warning">
						序列号列表
					</el-badge>
				</mt-tab-item>
			</mt-navbar>
		</div>
		<mt-tab-container v-model="selected">
			<mt-tab-container-item id="1">
				<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<p class="num">
								<span>工单编号</span>
								<span>324723049023</span>
							</p>
							<p>
								<span>客户名称</span>
								<span>htt</span>
							</p>
							<p>
								<span>产品名称</span>
								<span>djiwejfow</span>
							</p>
							<p>
								<span>订单编号</span>
								<span>30934093-</span>
							</p>
							<p>
								<span>订单交期</span>
								<span>2019-8-1</span>
							</p>
							<p>
								<span>投产日期</span>
								<span>2019-7-1</span>
							</p>
							<p>
								<span>报废数量</span>
								<span>99</span>
							</p>
							<p>
								<span>完工状态</span>
								<span>未完工</span>
							</p>
							<p>
								<span>当前工位</span>
								<span>769</span>
							</p>
							<p>
								<span>派工状态</span>
								<span>未派工</span>
							</p>
							<p>
								<span>投产状态</span>
								<span>未投产</span>
							</p>
							<p>
								<span>待入库数量</span>
								<span>78</span>
							</p>
							<p>
								<span>已经申请量</span>
								<span>34</span>
							</p>
							<p>
								<span>已缴库数量</span>
								<span>90</span>
							</p>
						</div>
					</div>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="2">
			</mt-tab-container-item>
		</mt-tab-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				selected: '1'
			}
		}
	}
</script>

<style scoped="scoped">
	.mui-card {
		box-shadow: 0px 6px 8px #cdcdcd;
	}

	.mui-card p {
		font-size: 15px;
		display: flex;
		margin-bottom: 15px;
		justify-content: space-between;
	}

	.mui-card .num {
		padding-bottom: 26px;
		border-bottom: 1px solid #EEEEEE;
	}

	.search-input {
		padding-left: 0;
		border: none;
		margin-bottom: 0;
		font-size: 16px;
	}

	.search {
		/* position: fixed; */
		/* z-index: 99;
		top: 50px;
		width: 100%; */
	}

	.mui-input-row {
		background: white;
	}

	.mint-navbar {
		background: #f4f4f5;
		margin-top: 26px;
		width: 100%;
		height: 3.5rem;
		overflow-x: scroll;
		white-space: nowrap;
	}

	.mint-navbar .mint-tab-item {
		margin-left: 26px;
		dispaly: inline-block;
	}
	.itemOut{
		 overflow: hidden;
		/* height: 3rem; */
	}
	.mui-input-row label {
		padding-right: 0px;
		font-size: 16px;
		width: 30%;
	}

	.mui-input-row label~input,
	.mui-input-row label~select,
	.mui-input-row label~textarea {
		width: 70%;
	}

	.el-button {
		padding: 8px 16px;
		margin-bottom: 0px;
		height: 30px;
		margin-top: 5px;
		margin-right: 10px;
	}

	.search-right {
		display: flex;
		justify-content: space-between;
	}

	.icon {
		margin-right: 7px;
	}

	.mint-tab-container {
		margin-top: 13px;
	}
</style>
